/********** 浅色模式 **********/
.dark {
  .main {
    background: rgba(0, 0, 0, .62);
  }

  /********** 登录页开始 **********/
  // 登录页左
  .login-page-left {
    background: #333;
  }
  // 登录页右
  .login-page-right {
    background: #666;
  }
  // 登陆块
  .login-bar {
    background: #999;
    color: #eee;
    .login-win-line {
      // 输入框
      .el-input {
        border-bottom: 2px solid #ccc;
      }
      .el-input:hover {
        border-bottom: 2px solid #666;
      }
      // 登陆按钮
      .el-button {
        background: #888;
        color: #eee;
      }
      .el-button:hover {
        background: #666;
        color: #fff;
      }
    }
  }
  /********** 登录页结束 **********/

  /********** 首页开始 **********/
  // 头部导航栏
  .head-bar {
    background: rgba(0, 0, 0, 0.92);
    color: #ddd;
  }
  // 底部栏
  .footer-bar {
    background: rgba(0, 0, 0, .82);
    color: #ddd;
    // 底部栏 合作伙伴栏
    .footer-crop {
      border-top: 1px solid rgba(156, 156, 156, 0.5);
      border-bottom: 1px solid rgba(156, 156, 156, 0.5);
    }
  }
  .intro-bar {
    background: transparent;
  }
  // 走马灯
  .intro-card {
    background: transparent;
    // 卡片样式
    .card-item {
      color: #ccc;
      background-color: #666;
    }
    // 卡片样式 激活
    .card-active {
      background-color: #333;
    }
  }
  // 横屏广告
  .landscape-bar {
    background: #888;
    // 标题
    .bar-title {
      color: #000;
    }
    // 子标题
    .bar-sub-title {
      color: #333;
    }
    // 链接
    .bar-link {
      color: #06c;
    }
  }

  // 竖屏广告
  .portrait-bar {
    background: #ddd;
    // 横屏广告 标题
    .bar-title {
      color: #000;
    }
    // 横屏广告 子标题
    .bar-sub-title {
      color: #333;
    }
    // 竖屏广告 链接
    .bar-link {
      color: #06c;
    }
  }
  /********** 首页结束 **********/

  /********** 后台布局样式开始 **********/
  .back-container {
    background: transparent;
  }
  // 侧边栏菜单样式
  .back-container .back-aside {
    background: #999;
    color: #ddd;
    border-right: 1px solid #333;
    // 侧栏菜单
    .aside-basic-vertical {
      background: inherit;
      color: inherit;
      // 路由菜单列表父类
      .menu-basic {
        background: #999;
        color: #eee; // 同菜单栏
        // 菜单栏图标颜色
        .iconfont {
          color: #eee;
        }
        // 菜单 - 没有子菜单 - 统一样式
        .menu-item {
          background: inherit; // 继承父类
          color: inherit; // 继承父类
        }
        // 菜单 - 没有子菜单 - 激活样式
        .menu-item:not(.el-submenu).is-active {
          background: #666 !important;
        }
        // 菜单 - 没有子菜单 - 悬停样式
        .menu-item:not(.is-opened):hover {
          background: #666 !important;
        }
        // 菜单 - 有子菜单统一样式
        .el-submenu {
          background: inherit;
          color: inherit;
          .el-submenu__title {
            background: inherit;
            color: inherit;
            // 下拉箭头
            .el-submenu__icon-arrow {
              color: inherit;
            }
          }
          // 子菜单样式
          .menu-item {
            background: #ccc;
            color: inherit;
          }
          .menu-item.is-active {
            background: #888 !important;
          }
          .menu-item:hover {
            background: #888 !important;
          }
        }
        .el-submenu.is-opened {
          .el-submenu__title {
            background: #666 !important;
          }
        }
      }
    }
  }
  // 后台内容主体
  .back-container .back-content .back-content-main  {
    background: transparent;
  }
  // 后台头部栏
  .top-line {
    background: #666;
    color: #ddd; // 同菜单栏
    font-size: 16px;
    // 头部自定义菜单
    .top-line-menu {
      color: #ddd !important; // 同菜单栏
      border-bottom: 2px solid transparent !important;
    }
    .top-line-menu:hover {
      border-bottom: 2px solid #ccc !important; // 同菜单栏
    }
    // 头部自定义菜单分割
    .menu-split {
      background: #ddd;
    }
    // 路由菜单列表父类
    .menu-basic {
      background: inherit; // 继承父类
      color: inherit; // 继承父类
      // 菜单栏图标颜色
      .iconfont {
        color: #ddd;
      }
      // 菜单 - 没有子菜单 - 统一样式
      .menu-item {
        background: inherit; // 继承父类
        color: inherit; // 继承父类
      }
      // 菜单 - 没有子菜单 - 激活样式
      .menu-item.is-active {
        color: inherit;
        background: #999 !important;
        border-bottom: 2px solid #ccc !important;
      }
      // 菜单 - 没有子菜单 - 悬停样式
      .menu-item:hover {
        color: inherit;
        background: #999 !important;
        border-bottom: 2px solid #ccc !important;
      }
      // 菜单 - 有子菜单统一样式
      .el-submenu {
        background: inherit;
        color: inherit;
        .el-submenu__title {
          background: inherit;
          color: inherit;
          // 下拉箭头
          .el-submenu__icon-arrow {
            color: inherit;
          }
        }
        .el-submenu__title:hover {
          background: #999 !important;
          border-bottom: 2px solid #ccc !important;
        }
      }
      .el-submenu.is-active {
        .el-submenu__title {
          background: #999 !important;
          border-bottom: 2px solid #ccc !important;
        }
      }
    }
  }
  /********** 后台布局样式结束 **********/

  /************************************************* 自定义样式开始 ***********************************************************/
  // 收索栏
  .search-bar {
    background: #ddd;
  }
  .search-btn {
    background: #a77fd2 !important;
    color: #fff !important;
  }
  .reset-btn {
    background: #eed265 !important;
    color: #fff !important;
  }
  .add-btn {
    background: #82b4a1 !important;
    color: #fff !important;
  }
  .mod-btn {
    background: #e98d57 !important;
    color: #fff !important;
  }
  .del-btn {
    background: #a24556 !important;
    color: #fff !important;
  }
  /************************************************* 自定义样式结束 ***********************************************************/

  /*********************************************** Element 样式重定义 *********************************************************/

  .el-input__inner {
    border: 1px solid #ddd !important;
  }
  .el-input__inner:hover {
    border: 1px solid #ccc !important;
  }
  .el-input__inner:focus-within {
    border: 1px solid #ccc !important;
  }
  .el-table thead th {
    background: #ccc !important;
    color: #333 !important;
  }
  .el-table tbody td {
    background: #ddd !important;
    color: #666 !important;
  }
}
// 通过 append 加上的标签
.el-menu--horizontal {
  .el-menu--popup {
    padding: 0;
    margin: 0;
    .el-menu-item {
      background: #fff !important;
    }
    .el-menu-item.is-active {
      background: #eee !important;
    }
    .el-menu-item:hover {
      background: #eee !important;
    }
  }
}
/*********************************************** Element 样式重定义 *********************************************************/
